<template>
	<div
		class="float-bth"
		@click="btnEvent(item)"
		:style="{
			backgroundColor: modelData.btnStyle === 2 ? modelData.bgColor : 'transparent',
			borderColor: modelData.btnStyle === 2 ? modelData.bgColor : '#999999'
		}"
	>
		<image :src="modelData.image" class="float-img" />
	</div>
</template>

<script>
export default {
	name: 'FloatBth',
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	methods: {
		btnEvent(item) {
			if (this.modelData.btnType === 2) {
				uni.makePhoneCall({
					phoneNumber: this.modelData.phone
				});
			} else if (this.modelData.btnType === 1) {
				this.goPage(this.modelData.url, this.modelData.switchTab);
			} else {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		}
	}
};
</script>

<style lang="scss">
.float-bth {
	position: fixed;
	bottom: 250upx;
	right: 20upx;
	width: 80upx;
	height: 80upx;
	text-align: center;
	cursor: pointer;
	border-radius: 100%;
	border: 1upx solid #999;
	box-shadow: 0 6upx 20upx #dcdcdc;
	z-index: 99;
	.float-img {
		width: 40upx;
		height: 40upx;
		display: inline-block;
		margin-top: 20upx;
	}
}
</style>
